<template>
  <van-cell-group class="cell-group-house">
    <van-cell
      class="look-house"
      v-for="(item, index) in getHouseList"
      :key="index"
      @click="tohouseInfo(item.houseCode)"
    >
      <div class="house-img"><img :src="toUrl + item?.houseImg" alt="" /></div>
      <div class="house-info">
        <h3 class="house-title">{{ item.title }}</h3>
        <div class="house-desc">{{ item.desc }}</div>
        <div class="tags-list">
          <van-tag
            v-for="(tag, i) in item.tags.slice(0, 4)"
            :key="i"
            type="primary"
            class="tag"
            :class="{
              HouseItem1: i === 0,
              HouseItem2: i === 1,
              HouseItem3: i === 2
            }"
            >{{ tag }}
          </van-tag>
        </div>
        <div class="price">
          <span class="hs-price">{{ item.price }}</span>
          元/每月
        </div>
      </div>
    </van-cell>
  </van-cell-group>
  <!-- <van-cell-group v-else class="cell-group-house">
    <van-cell>
      <van-empty description="暂无房源" />
    </van-cell>
  </van-cell-group> -->
</template>

<script>
import { TotalUrl } from '@/utils/TotalUrl.js'
import { mapMutations } from 'vuex'

export default {
  name: 'gghouseList',
  components: {},
  props: {
    getHouseList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      // 图片基地址
      toUrl: TotalUrl
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    ...mapMutations(['SET_HOUSEID']),
    tohouseInfo(id) {
      this.SET_HOUSEID(id)
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.cell-group-house {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-top: 2px solid #e4e6f0;
}
.look-house {
  width: 690px;
  height: 240px;
  padding-top: 36px !important;
  .van-cell__value {
    display: flex;
    flex-direction: row;
    border-bottom: 2px solid #e4e6f0;
    .house-img {
      width: 212px;
      height: 160px;
      img {
        width: 212px !important;
        height: 160px !important;
      }
    }
    .house-info {
      padding-left: 24px;
      .house-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        width: 454px;
        margin: 0;
        font-size: 30px;
        color: #394043;
      }
      .house-desc {
        font-size: 24px;
        color: #afb2b3;
      }
      .tags-list {
        .tag {
          display: inline-block;
          font-size: 24px;
          border-radius: 6px;
          padding: 8px 10px;
          margin-right: 10px;
          line-height: 24px;
          color: #333333;
          background: #fff;
        }
        .HouseItem1 {
          color: #39becd;
          background: #e1f5f8;
        }
        .HouseItem2 {
          color: #3fc28c;
          background: #e1f5ed;
        }
        .HouseItem3 {
          color: #5aabfd;
          background: #e6f2ff;
        }
      }
      .price {
        font-size: 24px;
        color: #fa5741;
        .hs-price {
          font-size: 32px;
          font-weight: bolder;
        }
      }
    }
  }
}
.van-cell {
  padding: 0;
}
</style>
